<template>
  <el-container class="app">
    <el-aside width="300px">
      <org-tree @getOrg="goOrg"></org-tree>
    </el-aside>
    <el-main>
      <component v-if="componentKey!=''" v-bind:is="componentKey" :orgId="org.id"></component>
      <div v-else>请选择左侧组织架构节点</div>
    </el-main>
  </el-container>
</template>
<script>
import orgTree from "./org-tree.vue";
import orgCorp from "./org-corp.vue";
import orgDept from "./org-dept.vue";
import orgNew from "./org-new.vue";
export default {
  components: {
    orgTree,
    orgCorp,
    orgDept,
    orgNew
  },
  data() {
    return {
      org: {}
    };
  },
  computed: {
    componentKey: function() {
      if (this.org.type == "CORP") return orgCorp;
      if (this.org.type == "DEPT") return orgDept;
      return "";
    }
  },
  methods: {
    goOrg(org) {
      this.org = org;
    }
  },
  watch: {}
};
</script>
<style scoped>
.app-nav.b-nav {
  width: 300px;
}
</style>
